import './Scss/APSSchedule.scss'
import { useEffect, useRef, useState } from 'react'
import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { message, Select } from 'antd'
import { ApsCenterFormat } from '../../../../Common/Forge/APSModal'
import { useCallback } from 'react'
import dayjs from 'dayjs'

const { Autodesk, THREE } = window
const config3d = { extensions: ['ToolbarExtension'] }

const ModalColorOne = new THREE.Vector4(255 / 255, 0 / 255, 0 / 255, 1)
const ModalColorTwo = new THREE.Vector4(0 / 255, 255 / 255, 0 / 255, 1)

export const APSSchedule001 = ({ list }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const APSBox = useRef(null)
    const [Viewing, setViewing] = useState()
    const [APSListSelect, setAPSListSelect] = useState(list[0].value)
    const [TypeSelect, setTypeSelect] = useState(0)
    const [DataType] = useState([
        { label: '对比进度', value: 0 },
        { label: '累计进度', value: 1 },
    ])
    const [DateList, setDataList] = useState()
    const [DateSelect, setDateSelect] = useState()

    const [ModalOne, setModalOne] = useState()
    const [ModalTwo, setModalTwo] = useState()

    const [ProNumber, setProNumber] = useState({ one: 0, two: 0 })

    const { runAsync: getBIMPlanLists } = useRequest(Http, { manual: true })
    const { runAsync: getScenesDetails } = useRequest(Http, { manual: true })
    const { runAsync: getOneDataApi } = useRequest(Http, { manual: true })
    const { runAsync: getTwoDataApi } = useRequest(Http, { manual: true })

    const SelectAPS = e => {
        setAPSListSelect(e)
        RenderingAPS(Viewing, e, TypeSelect)
    }

    const SelectType = e => {
        setTypeSelect(e)
        RenderingAPS(Viewing, APSListSelect, e)
    }

    const SelectDate = e => {
        setDateSelect(e)
        getTwoData(APSListSelect, e, Viewing)
    }

    const getOneData = useCallback(
        (uuid, viewing) => {
            getOneDataApi({
                url: 'getBIMFinishModlesInfoExternalId',
                data: { bimFilesUuid: uuid, finishtime: dayjs().format('YYYY-MM-DD') },
            }).then(res => {
                const { table, table1 } = res.list
                setProNumber({ one: table.length, two: table1.length })
                table1.forEach(key => viewing.setThemingColor(key.dbId, ModalColorOne))
                table.forEach(key => viewing.setThemingColor(key.dbId, ModalColorTwo))
            })
        },
        [getOneDataApi],
    )

    const getTwoData = useCallback(
        (uuid, date, viewing) => {
            console.log(0)
            getTwoDataApi({
                url: 'getBIMPlanModlesInfoExternalId',
                data: { BIMPlanUuid: uuid, BIMPlanTableName: date },
            }).then(res => {
                const { table, table1 } = res.list
                viewing.clearThemingColors(ModalOne)
                viewing.clearThemingColors(ModalTwo)
                setProNumber({ one: table.length, two: table1.length })
                if (table.length !== 0) table.forEach(key => viewing.setThemingColor(key.dbId, ModalColorTwo, ModalTwo))
                if (table.length !== 1)
                    table1.forEach(key => viewing.setThemingColor(key.dbId, ModalColorOne, ModalOne))
            })
        },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [getTwoDataApi],
    )

    const getTwoList = useCallback(
        (uuid, viewing) => {
            getBIMPlanLists({ url: 'getBIMPlanLists', data: { bimFilesUuid: uuid } }).then(res => {
                const data = res.list.map(item => ({ label: item.tableName, value: item.tableName }))
                const [{ value }] = data
                setDateSelect(value)
                setDataList(data)
                getTwoData(uuid, value, viewing)
            })
        },
        [getBIMPlanLists, getTwoData],
    )

    const RenderingAPS = useCallback(
        (viewing, uuid, dataType) => {
            getScenesDetails({ url: 'getScenesDetails', data: { ScenesUuid: uuid } }).then(res => {
                const [{ constitutesUuid, storagePath, longitude, latitude, center }] = res.list
                viewing.tearDown()
                if (dataType === 0) {
                    viewing.loadModel(storagePath, {}, () => {
                        viewing.setLightPreset(Number(longitude))
                        viewing.setEnvMapBackground(Number(latitude))
                        viewing.autocam.goToView(ApsCenterFormat(JSON.parse(center)))
                        getOneData(constitutesUuid, viewing)
                    })
                } else {
                    var options = { viewports: [id => id === 1, id => id === 2] }
                    viewing.loadModel(storagePath, {}, modal1 => {
                        modal1.id = 1
                        setModalOne(modal1)
                        viewing.setLightPreset(Number(longitude))
                        viewing.setEnvMapBackground(Number(latitude))
                        viewing.autocam.goToView(ApsCenterFormat(JSON.parse(center)))
                        viewing.loadModel(storagePath, {}, modal2 => {
                            modal2.id = 2
                            setModalTwo(modal2)
                            viewing.loadExtension('Autodesk.SplitScreen', options)
                        })
                        getTwoList(constitutesUuid, viewing)
                    })
                }
            })
        },
        [getOneData, getScenesDetails, getTwoList],
    )

    useEffect(() => {
        Autodesk.Viewing.Initializer({ env: 'Local' }, () => {
            const viewing = new Autodesk.Viewing.GuiViewer3D(APSBox.current, config3d)
            setViewing(viewing)
            viewing.start('', {}, () => messageApi.success('APS场景初始化成功!'))
            RenderingAPS(viewing, list[0].value, 0)
        })
    }, [RenderingAPS, list, messageApi])

    return (
        <div className="APSSchedule001">
            {contextHolder}
            <div className="ForgeModal" ref={APSBox} />
            <div className="Select">
                <div>
                    <div>模型 : </div>
                    <Select options={list} value={APSListSelect} onChange={SelectAPS} />
                </div>
                <div>
                    <div>类型 : </div>
                    <Select options={DataType} value={TypeSelect} onChange={SelectType} />
                </div>
                {TypeSelect === 1 && (
                    <div>
                        <div>月份 : </div>
                        <Select options={DateList} value={DateSelect} onChange={SelectDate} />
                    </div>
                )}
            </div>
            <div className="legend">
                {TypeSelect === 0 ? (
                    <div>
                        <div>
                            <div style={{ background: '#00FF00' }} />
                            <div>截止上月进度 : </div>
                            <div>{ProNumber.one ?? 0} 个</div>
                        </div>
                        <div>
                            <div style={{ background: '#ff0000' }} />
                            <div>本月实际进度 : </div>
                            <div>{ProNumber.two ?? 0} 个</div>
                        </div>
                    </div>
                ) : (
                    <div>
                        <div>
                            <div style={{ background: '#00FF00' }} />
                            <div>当月计划进度 : </div>
                            <div>{ProNumber.one ?? 0} 个</div>
                        </div>
                        <div>
                            <div style={{ background: '#ff0000' }} />
                            <div>当月实际进度 : </div>
                            <div>{ProNumber.two ?? 0} 个</div>
                        </div>
                    </div>
                )}
            </div>
        </div>
    )
}
